<template>
    <Menu></Menu>
    <div class="mainDiv">
        <div class="layout">
            <el-tabs type="border-card">
                <el-tab-pane label="登录">
                    <el-form label-position="right"
                             label-width="65px"
                             style="max-width: 460px"
                             class="loginForm"
                             ref="loginFormRef"
                             :model="userFormNormal"
                             :rules="rulesLogin"

                    >
                        <el-form-item label="账号：" prop="username">
                            <el-input v-model="userFormNormal.username" placeholder="只能是英文字母和数字"/>
                        </el-form-item>
                        <el-form-item label="密码：" prop="password">
                            <el-input type="password" v-model="userFormNormal.password"/>
                        </el-form-item>
                        <el-form-item style="margin-left: 200px">
                            <div class="resetPasswordDiv">
                                <span>忘记密码</span>&nbsp;
                                <router-link :to="{path: '/resetPassword'}" >去修改</router-link>
                            </div>

                        </el-form-item>

                        <el-row>
                            <el-checkbox
                                    class="checkBox"
                                    v-model="userFormNormal.isAgree"
                                    label="同意用户使用准则"
                                    name="type"
                            />
                        </el-row>
                        <el-button
                                v-if="userFormNormal.isAgree"
                                type="primary"
                                class="loginBtn"
                                @click="loginByUser"
                        >
                            登录
                        </el-button>
                    </el-form>
                </el-tab-pane>


                <!-- <el-tab-pane label="教师登录">
                    <el-form label-position="right"
                             label-width="65px"
                             style="max-width: 460px"
                             class="loginForm"
                             ref="loginFormRef"
                             :model="userFormNormal"
                             :rules="rulesLogin"

                    >
                        <el-form-item label="账号：" prop="username">
                            <el-input v-model="userFormNormal.username" placeholder="只能是英文字母和数字"/>
                        </el-form-item>
                        <el-form-item label="密码：" prop="password">
                            <el-input type="password" v-model="userFormNormal.password"/>
                        </el-form-item>
                        <el-form-item style="margin-left: 200px">
                            <div class="resetPasswordDiv">
                                <span>忘记密码</span>&nbsp;
                                <router-link :to="{path: '/resetPassword'}" >去修改</router-link>
                            </div>

                        </el-form-item>

                        <el-row>
                            <el-checkbox
                                    class="checkBox"
                                    v-model="userFormNormal.isAgree"
                                    label="同意用户使用准则"
                                    name="type"
                            />
                        </el-row>
                        <el-button
                                v-if="userFormNormal.isAgree"
                                type="primary"
                                class="loginBtn"
                                @click="loginByTeacher"
                        >
                            登录
                        </el-button>
                    </el-form>
                </el-tab-pane> -->


                <el-tab-pane label="注册">
                    <el-form
                            label-position="right"
                            label-width="100px"
                            style="max-width: 460px"
                            class="loginForm"
                            ref="registerFormRef"
                            :model="rForm"
                            :rules="rulesRegister"
                    >
                        <el-form-item label="账号：" prop="username">
                            <el-input v-model="rForm.username" placeholder="只能是英文字母和数字"/>
                        </el-form-item>
                        <el-form-item label="密码：" prop="password">
                            <el-input type="password" v-model="rForm.password"/>
                        </el-form-item>
                        <el-form-item label="确认密码：" prop="confirmPassword">
                            <el-input
                                    type="password"
                                    v-model="rForm.confirmPassword"
                                    @blur="confirmFunc"
                            />
                        </el-form-item>
                        <el-form-item label="手机号：" prop="phone">
                            <el-input v-model="rForm.phone" maxlength="11"/>
                        </el-form-item>

                        <el-row>
                            <el-checkbox
                                    class="checkBox"
                                    v-model="rForm.rIsAgree"
                                    label="同意用户使用准则"
                                    name="type"
                            />
                        </el-row>
                        <el-button
                                v-if="rForm.rIsAgree"
                                type="primary"
                                class="loginBtn"
                                @click="registerOnSubmit"
                        >
                            注册
                        </el-button>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </div>
        <el-button
        type="primary"
        class="loginBtn"
        text="plain"
        @click="switchToAdmin"
            >
            管理员登录
        </el-button>
    </div>
</template>

<script setup>
    import {reactive, ref,onMounted} from "vue";
    import {ElMessage} from "element-plus";
    import {userLogin, userRegister} from "@/api/user";
    //! import {teacherLogin, teacherRegister} from "@/api/teacher"
    import {useRouter} from 'vue-router'
    import {useStore} from 'vuex'
    import {socket} from "@/utils/webSocket";
    //普通登录
    const userFormNormal = reactive({username: "", password: "", isAgree: 0});
    //注册表单
    const rForm = reactive({username: "", password: "", confirmPassword: "", rIsAgree: 0, phone: ''})
    //检验规则
    const rulesLogin = reactive({
        username: [
            {required: true, message: '请填写用户名', trigger: 'blur'},
            {min: 3, max: 10, message: '用户名长度3-10个字符', trigger: 'blur'},
            {pattern: /^[a-zA-Z0-9]+$/, message: "账号只能为英文字母和数字", trigger: 'blur'}
        ],
        password: [
            {required: true, message: '请填写密码', trigger: 'blur'},
            {min: 3, max: 16, message: '密码长度3-16个字符', trigger: 'blur'},
            {pattern: /^[a-zA-Z0-9]+$/, message: "密码只能为英文字母和数字", trigger: 'blur'}
        ]
    });
    const rulesRegister = reactive({
        username: [
            {required: true, message: '请填写账号', trigger: 'blur'},
            {min: 3, max: 10, message: '用户名长度3-10个字符', trigger: 'blur'},
            {pattern: /^[a-zA-Z0-9]+$/, message: "账号只能为英文字母和数字", trigger: 'blur'}
        ],
        password: [
            {required: true, message: '请填写密码', trigger: 'blur'},
            {min: 3, max: 16, message: '密码长度3-16个字符', trigger: 'blur'},
            {pattern: /^[a-zA-Z0-9]+$/, message: "密码只能为英文字母和数字", trigger: 'blur'}
        ],
        confirmPassword: [
            {required: true, message: '请再次填写密码', trigger: 'blur'},
            {min: 3, max: 16, message: '密码长度3-16个字符', trigger: 'blur'},
            {pattern: /^[a-zA-Z0-9]+$/, message: "密码只能为英文字母和数字", trigger: 'blur'}
        ],
        phone: [{required: true, message: '请填写手机号，用于密码重置', trigger: 'blur'},
            {pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: "请填写正确手机号", trigger: "blur"}]
    })
    const loginFormRef = ref();
    const registerFormRef = ref();
    const router = useRouter();
    const store = useStore();
    // const validatePhoneNumber =(phoneNumber)=> {
    //     // 移动手机号段：134-139、147、150-152、157-159、165、172、178、182-184、187-189、198
    //     // 联通手机号段：130-132、145、155-156、166、171、175-176、185-186、196
    //     // 电信手机号段：133、149、153-154、162、173-174、177、180-181、189、199
    //     // 虚拟运营商手机号段：170、171
    //     const regExp = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/; // 11位手机号正则表达式
    //     return regExp.test(phoneNumber);
    // }
    // function validateUsername(username) {
    //     // 使用正则表达式匹配只包含英文字母和数字的用户名
    //     const regex = /^[a-zA-Z0-9]+$/;
    //
    //     return regex.test(username);
    // }
    // 方法
    // 登录
    onMounted(() => {
        console.log("进入登录页面");
    });
    const switchToAdmin=() => {
        router.push({path:"/adminLogin"})
    };
    const loginByUser = () => {
        console.log("点击登录按钮");
        loginFormRef.value.validate((valid) => {
            if (valid) {
                console.log("jinlailma");
                userLogin(userFormNormal).then((res) => {
                    // console.log(userFormNormal)
                    let user = res.data;
                    console.log("res:");
                    console.log(res)
                    store.commit("saveUser", user);
                    store.commit("saveStatus", true);
                    // socket.initWebSocket('ws://localhost:8081/notice/'+store.getters.getId);
                    // console.log();
                    router.replace({path: "/",query:{refresh: true}});
                    // router.replace("/")
                    // router.push ({path: "/"})
                })
            }
        })
    }
    // const loginByTeacher = () => {
    //     loginFormRef.value.validate((valid) => {
    //         console.log(valid);
    //         if (valid) {
    //             userLogin(userFormNormal).then((res) => {//!
    //                 console.log(userFormNormal);
    //                 console.log(res)
    //                 let teacher = res.data;
    //                 store.commit("saveTeacher", teacher);
    //                 store.commit("saveTeacherStatus", true);
    //                 router.push({path: "/"});
    //             })
    //         }
    //     })
    // }

    // 注册
    const registerOnSubmit = () => {
        registerFormRef.value.validate((valid) => {
            // console.log(valid);
            if (valid) {
                console.log(rForm)
                userRegister(rForm).then((res) => {
                    console.log(res);
                    let user = res.data;
                    store.commit("saveUser", user)
                    // store.commit("saveStatus", true);
                    router.push({path: "/",query:{refresh: true}});
                })
            }
        })
    }
    // // 获取验证码
    // const getIdentifyCode = () => {
    //     console.log("获取验证码");
    // }
    const confirmFunc = () => {
        if (rForm.confirmPassword !== rForm.password)
            ElMessage.error("密码与确认密码不一致.");
    };

</script>

<style scoped>
    .mainDiv {
        width: 100%;
        height: 91%;
        background-image: linear-gradient(135deg, #C2FFD8 10%, #465EFB 100%);
    }

    .layout {
        position: absolute;
        left: calc(50% - 200px);
        top: 20%;
        width: 400px;
    }

    .loginBtn {
        width: 100px;
    }

    .loginForm {
        text-align: center;
    }

    .checkBox {
        margin-left: 7px;
    }

    .inpWidth {
        width: 165px;
    }
    .resetPasswordDiv{
        font-size: 12px;
        text-align: left;
    }
</style>